<template>
    <div class="searchPage">
        <van-search ref="search" autofocus v-model="searchKeyword" shape="round" placeholder="搜索" />
        <div class="popularSearch">
            <h3>热门歌曲</h3>
            <ul>
                <li v-for="i in 6" :key="i">搜搜搜搜搜搜</li>
            </ul>
        </div>
        <ul class="searchHistory">
            <li v-for="i in 10" :key="i">
                <div class="content">
                    <van-icon name="clock-o" />
                    <div>你好你好你好你好你好你好</div>
                    <van-icon name="cross" />
                </div>
            </li>
        </ul>
        <div>
            <bottom></bottom>
        </div>
    </div>
</template>

<script>
    import bottom from "../../../layout/components/bottom";
    export default {
        name : "Searchcircle",
        data(){
            return {
                searchKeyword:''
            }
        },
components:{bottom}
    }
</script>

<style scoped lang="less">
    .searchPage {

        background-color: #FCFCFD;
        .popularSearch {
            padding: 15px 10px 0;
            h3{
                font-size: 12px;
                line-height: 12px;
                color: #666;
            }
            ul{
                margin: 10px 0 7px;
                li{
                    position: relative;
                    display: inline-block;
                    height: 32px;
                    margin-right: 8px;
                    margin-bottom: 8px;
                    padding: 0 14px;
                    font-size: 14px;
                    line-height: 32px;
                    color: #333;
                    border: 1px solid #d3d4da;
                    border-radius: 32px;
                }
            }
        }
        .searchHistory {
            li{
                padding: 7px 15px;

                .content {
                    display: flex;
                    align-items: center;
                    margin-bottom: 10px;
                    i{

                        color: #ccc;
                    }
                    div{
                        color: #333333;
                        flex-grow: 1;
                        padding: 0 10px;
                    }
                }

            }
        }
    }
</style>
